<template>
  <div class="zyLog">
    <zy-title :border="border" v-if="logsTitle">{{logsTitle}}</zy-title>
    <div class="logContent">
      <div class="logItem">
        <div class="user">操作员</div>
        <div class="time">操作时间</div>
        <div class="desc">描述</div>
      </div>
      <template v-if="tableData&&tableData.length>0">
        <div class="logItem" v-for="(log,index) in tableData" :key="index">
          <div class="user">{{log.operation_name}}</div>
          <div class="time">{{log.created_time_desc}}</div>
          <div class="desc" v-html="log.operation_content"></div>
        </div>
      </template>
      <template v-else>
        <div class="logItem">
          <div class="nomore">{{emptyText}}</div>
        </div>
      </template>
    </div>
    <div class="pageArea" v-if="showPage">
      <el-pagination background layout="total, sizes,prev, pager, next,jumper" @size-change="sizeChange"
                     @current-change="pageChange" :page-sizes="[10, 20, 30, 50]" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
	export default {
		name: "zyLogs",
		props: {
			border: {
				type: Boolean,
				default: () => false
			},
			logs: {
				type: Array,
				default: () => []
			},
			emptyText: {
				type: String,
				default: () => '暂无数据'
			},
			logsTitle: {
				type: String,
				default: () => '操作日志'
			},
			showPage: {
				type: Boolean,
				default: () => true
			}
		},
		data() {
			return {
				total: 0,
				page_start: 1,
				page_size: 10,
				tableData: []
			};
		},
		computed: {},
		watch: {
			logs: {
				handler() {
					this.getData();
				},
				deep: true
			}
		},
		components: {},
		methods: {
			sizeChange(val) {
				this.page_size = val;
				this.getData();
			},
			pageChange(val) {
				this.page_start = val;
				this.getData();
			},
			getData() {
				this.total = this.logs.length;
				this.tableData = this.logs.slice(this.page_size * (this.page_start - 1), this.page_size * this.page_start);
			}
		},
		mounted() {
		},
		created() {
		}
	}
</script>

<style scoped lang="less">
  @import "../../style/common/base";

  @tableHeaderBgColor:#F0F0F0;
  @tableBgColor: #F9FBFF;

  .zyLog {
    margin-top: 24px;
    padding-bottom: 24px;
    border-radius: 16px;
    background: @allWhite;

    .logContent {
      /*margin: 0 16px;*/

      .logItem {
        display: flex;

        &:nth-child(2n-1) {
          background: @tableBgColor;
        }

        &:first-child {
          font-weight: bold;
          background: @tableHeaderBgColor;
        }

        .nomore {
          font-size: 14px;
          color: @fontGrayColor;
          text-align: center;
          width: 100%;
          line-height: 44px;
        }

        .user {
          flex: 0 0 160px;
          padding: 14px 16px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .time {
          flex: 0 0 300px;
          padding: 14px 16px;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .desc {
          padding: 14px 16px;
          flex: auto;
          text-align: center;
          word-break: break-all;
        }

        &:first-child {
          text-align: center;
        }

        &:last-child {
          border-bottom: none;
        }
      }
    }

    .pageArea {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px 0;
      /*分页操作栏样式*/

      /deep/ .el-pagination {
        color: @fontColor;
      }

      /deep/ .el-pagination .el-pagination__total {
        font-size: 12px;
        color: @fontColor;
      }

      /deep/ .el-pagination .el-pagination__sizes {
        font-size: 12px;
        color: @fontColor;
      }

      /deep/ .el-pagination .el-input__inner {
        border: 1px solid #C7CBD1;
        color: @fontColor;
        border-radius: 4px;
        font-size: 12px;
      }

      /deep/ .el-pagination .el-pager li {
        font-size: 12px;
        font-weight: normal;
      }

      /deep/ .el-pagination .el-pager li.active {
        background-color: @allPrimaryColor;
      }

      /deep/ .el-pagination .el-pager li:not(.disabled).active {
        background-color: @allPrimaryColor;
      }
    }
  }
</style>
